<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>



	<body>

		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header" id="hereuser">欢迎您,</div>
			<!--内容区-->
			<div class="mui-card-content">

				<div id="main" style="width: 100%;height:350px;margin: 0px;padding: 0px;"></div>

			</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">
				<button id="exitbtn" type="button" class="mui-btn mui-btn-outlined">退出登录</button>
			</div>
		</div>



		<script src="js/mui.js"></script>
		<script src="js/echarts.min.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {

				var user = plus.storage.getItem("user");
				var userid = plus.storage.getItem("id");
				if (!userid) {
					return;
				}
				document.getElementById('hereuser').innerHTML = document.getElementById('hereuser').innerHTML + user;

				document.getElementById("exitbtn").addEventListener("tap", function() {
					plus.storage.clear();
					plus.webview.show("login");
					plus.webview.hide("my");
				});

				var res = new Array();

				mui.ajax('http://192.168.124.5:5000/history/' + userid, {
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						res[0] = data[0]
						res[1] = data[1]
						res[2] = data[2]
						res[3] = data[3]
						drawchart()
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.toast("无法连接服务器");
					}
				});

				function drawchart() {
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '历史浏览',
							subtext: '大数据记录',
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: ['国内', '国际', '科技', '财经']
						},
						series: [{
							name: '浏览类别',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: [{
									value: res[0],
									name: '国内'
								},
								{
									value: res[1],
									name: '国际'
								},
								{
									value: res[2],
									name: '科技'
								},
								{
									value: res[3],
									name: '财经'
								}
							],
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};


					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}






			});
		</script>
	</body>

</html>
